{% extends "base.html" %}
{% load cctags %}
{% load ccfilters %}

{% block css %}
<link type="text/css" rel="stylesheet" href="/static/styles/routes.css"/>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="{% url views.localjavascript 'magicycle.js' %}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var more_rides = $("#more_rides");
        more_rides.click(function(){
            $.post("{% url apis.apisviews.rest %}",
                    {method:"get_all_rides",
                     start_cursor: $("#rides_cursor").val(),
                     pagesize: {{pagesize}}
                    },
                    function(data){
                        data = JSON.parse(data);
                        if (data.status=="ok") {
                            $("#rides_cursor").val(data.end_cursor);
                            var count = data.rides.length;
                            if(count==0){
                                $.growlUI(' {% _ "No More Rides" %}',' ');
                                more_rides.hide();
                                return;
                            }
                            for(var i=0; i<count; i++){
                                _insert_ride_to_list(data.rides[i]);
                            }
                            $.growlUI(count + ' {% _ "Rides Loaded" %}',' ');
                        } else {
                            alert(data.message);
                        }
            });
            _insert_ride_to_list = function(ride){
                $("#ride_"+ride.id).remove();
                var ride_li = $('<li class="ride"><img class="tab_img" src="/static/images/rides.png"/> '+
                       '<a id="ride_name">' + ride.name + " - " +
                       ride.duration.toFixed(1) + ' {% _ "hours" %}' + '</a>' + ' - ' +
                       ride.rider + ' {% _ "Created on" %} ' + formatutc(ride.create_datetime,'yyyy-MM-dd hh:mm') +
                       '</li>');
                ride_li.attr("id", "ride_"+ride.id);
                $("#ride_name", ride_li).attr("href","/rides/"+ride.id);
                $("#ride_name", ride_li).attr("title", ride.name);
                ride_li.insertBefore($("#more_rides_li"));
            };
        });
    });
</script>
{% endblock %}

{% block menu %}
{% include '_menu_rides.html' %}
{% endblock %}

{% block main-page %}
<div id="showride_page">
    <h1 class="group_title">{% _ "All Rides" %}</h1>
    <input type="hidden" id="rides_cursor" value="{{ end_cursor }}"/>
    <ul>
    {% for ride in rides %}
        <li class="ride" id="ride_{{ ride.id }}">
            <img class="tab_img" src="/static/images/rides.png"/> 
            <a href="{% url routes.ridesviews.showride ride.id %}" title="{{ride.name}}">
                {{ ride.name }} -
                {{ ride.route.distance|divide:"1000"|_u|floatformat:"0" }} {{ unit.km_mile }} -
                {{ ride.duration }} {% _ "hours" %}

            </a> - 
            {{ ride.rider.name }} {% _ "Created on" %}
            {{ ride.create_datetime|cctimesince }} {% _ "ago" %}
        </li>
        {% if forloop.last %}
        <li id="more_rides_li">
            <a id="more_rides" href="javascript:;" class="yellowbutton smallsize">{% _ "More..." %}</a>
        </li>
        {% endif %}
    {% endfor %}
    </ul>
</div>
{% endblock %}
